window.onload = function () {
    //配置
    var config = {
        vx: 4,	//小球x轴速度,正为右，负为左
        vy: 4,	//小球y轴速度
        height: 2,	//小球高宽，其实为正方形，所以不宜太大
        width: 2,
        count: 200,		//点个数
        color: "0,0,0", 	//点颜色
        stroke: "50,50,50", 		//线条颜色
        dist: 6000, 	//点吸附距离
        e_dist: 20000, 	//鼠标吸附加速距离
        max_conn: 10 	//点到点最大连接数
    }

    //调用
    CanvasParticle(config);



    // 点击time
    let data = [
        { "times": 4000, "price": 1200, "unitPrice": "0.3000" },
        { "times": 8000, "price": 2000, "unitPrice": "0.2500" },
        { "times": 40000, "price": 8000, "unitPrice": "0.2000" }
    ]
    let boxr = document.querySelector(".box-r-th")
    console.log(boxr);

    data.forEach(function (v) {
        boxr.innerHTML += `<span>${v.times}次</span>`
    })


    let time = document.querySelectorAll(".box-r-th>span")
    let boxf = document.querySelector(".box-t-f")
    console.log(time, boxf);

    for (let k = 0; k < time.length; k++) {
        data[k].times===4000?time[k].classList.add("on"):""
        time[k].addEventListener("click", function () {
            for (let j = 0; j < time.length; j++) {
                time[j].classList.remove("on")
            }
            time[k].classList.add("on")
            boxf.innerHTML = `<p>
            <span>$${data[k].price}</span>
            <span> (约 ${data[k].unitPrice}元/次)</span>
            ,仅限企业实名购买;
        </p>`
        })
    }


// 选项卡
    let lis = document.querySelectorAll(".main-t .bor .uls li")
    let left = document.querySelectorAll(".main-m .main-l .left")
    console.log(lis, left);
    for (let i = 0; i < lis.length; i++) {
        lis[i].addEventListener("click", function () {
            for (let v = 0; v < lis.length; v++) {
                lis[v].classList.remove("lis")
                left[v].classList.remove("block")
            }
            lis[i].classList.add("lis")
            left[i].classList.add("block")
        })
    }




}





